<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
  <div class="execution">
    <basic-container>
      <h2 class="io-goods-detail">基础信息</h2>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="出库仓库">
          <el-input v-model="warehouseSn" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="出库类型">
          <el-radio-group v-model="exitType">
            <el-radio :label="1">配送</el-radio>
            <el-radio :label="2">加工</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </basic-container>
    <basic-container>
      <h2 class="io-goods-detail">出库单商品清单</h2>
      <template>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="商品">
            <el-select v-model="value" filterable placeholder="请输入商品">
              <el-option
                v-for="item in oldData"
                :key="item.id"
                :label="item.goodsName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="showAllGoods">查看所有商品</el-button>&nbsp;&nbsp;&nbsp;
          <el-form-item label="数量">
            <el-input placeholder="请输入" v-model="allNum"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addGoods">添加</el-button>
          </el-form-item>
        </el-form>
        <el-dialog title="商品列表" :visible.sync="dialogVisible">

          <el-table :data="goodsInfo" border @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column property="goodsImg" label="商品图片" width="120" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.modelUrl" width="45" height="45"/>
              </template>
            </el-table-column>
            <el-table-column property="goodsName" label="商品名称" align="center"></el-table-column>
            <el-table-column property="modelUnit" label="单位" align="center"></el-table-column>
            <el-table-column property="goodsCategory" label="商品分类" align="center"></el-table-column>
            <el-table-column property="modelName" label="规格" align="center"></el-table-column>
            <el-table-column property="modelPrice" label="价格" align="center"></el-table-column>
          </el-table>
          <div style="width: 100%;text-align: center">
            <el-pagination
              small
              :page-size="page.pageSize"
              @prev-click="prev"
              @next-click="next"
              @current-change="currentChange"
              :current-page="page.currentPage"
              layout="prev,pager,next"
              :total="page.total">
            </el-pagination>
          </div>
          <div slot="footer" scope="scope" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </div>
        </el-dialog>
        <el-table :data="tableData" border show-summary style="width: 100%">
          <el-table-column prop="id" label="序号" type="index" width="100px"></el-table-column>
          <el-table-column prop="modelUrl" label="商品">
            <template slot-scope="scope">
              <img :src="scope.row.modelUrl" width="45" height="45"/>
              <div>{{scope.row.goodsName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="productNumber" label="数量">
            <template slot-scope="scope">
              <el-input placeholder="请输入内容" v-model="scope.row.productNumber"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="modelUnit" sortable label="单位"></el-table-column>
          <el-table-column prop="modelPrice" sortable label="单价"></el-table-column>
          <el-table-column prop="money" sortable label="金额">
            <template slot-scope="scope">
              {{(scope.row.productNumber * scope.row.modelPrice).toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template>
        <div class="return-btn">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="primary" plain @click="backup">取消</el-button>
        </div>
      </template>
    </basic-container>
  </div>
</template>
<!-- 采购退货 -->
<script>
import { mapGetters } from "vuex";
import {
  addExitWarehouse,
  goodsList
} from '@/api/scm/warehouse/exit_warehouse'
import Util from '@/util/pds/utils'
import {getStore, setStore} from "@/util/store";
let cookieUtil = new Util();
export default {
  name: "addpurchaseback",
  data() {
    return {
      tableData: [],
      otherMoney: 100,
      calcMoney: 1000,
      basicInformation: {},
      page: {
        total: 31, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 6 // 每页显示多少条
      },
      dialogVisible: false,
      goodsInfo: [],
      exitType:1,
      warehouseSn:'',
      allNum:'',
      params:{},
      oldData:[],
      select:[],
      value:''
    };
  },
  computed: {
    ...mapGetters(["permissions",'tagWel', 'tagList', 'tag', 'website']),
    tagLen() {
      return this.tagList.length || 0
    }
  },
  created(){
    this.getList(this.page,this.params);
  },
  methods: {
    showAllGoods() {
      this.dialogVisible = true;
    },
    prev() {
      let params = {};
      this.page.currentPage = this.page.currentPage - 1;
      this.getList(this.page, params);
    },
    next() {
      let params = {};
      this.page.currentPage = this.page.currentPage + 1;
      this.getList(this.page, params);
    },
    currentChange(page) {
      let params = {};
      this.page.currentPage = page;
      this.getList(this.page, params)
    },
    handleSelectionChange(val) {
      this.select = val;
    },
    addGoods() {
      this.select.forEach(item=>{
        item.productNumber = this.allNum;
        this.tableData.push(item);
      })
      if(this.value != ''){
        this.oldData.forEach(item=>{
          if(item.id == this.value){
            item.productNumber = this.allNum;
            this.tableData.push(item);
            this.value = '';
          }
        })
      }
    },
    deleteRow(index, rows) {
      this.tableData.splice(index, 1);
    },
    save(){
      if(this.warehouseSn == ''){
        this.$message.error("请输入仓库编号");
        return false;
      }
      if(this.tableData == []){
        this.$message.error("请选择商品");
        return false;
      }
      let params = {
        pmId: this.getStore({name: "pmId"}),
        exitType:this.exitType,
        warehouseSn:this.warehouseSn,
        list: []
      };
      this.tableData.forEach(item=>{
        params.list.push({goodsModelId:item.id,productNumber:item.productNumber})
      })
      addExitWarehouse(params).then(res => {
        if (res.data.code == 0) {
          this.$message.success("添加成功")
          let _this = this;
          setTimeout(function () {
            _this.close();
          },2000)
        } else {
          this.$message.error("添加失败")
        }
      });
    },
    getList(page, params) {
      if(this.goodsInfo.length){
        var tmp = [];
        for(var i in this.oldData) {
          if (i <= page.currentPage * 10 && i >= (page.currentPage - 1) * 10) {
            tmp.push(this.oldData[i]);
          }
        }
        this.goodsInfo = tmp;
        return false;
      }
      goodsList(Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, params)).then(response => {
        response.data.data.forEach(item=>{
          item.productNumber = 0;
        })
        this.page.total = response.data.data.length;
        this.oldData = response.data.data;
        this.goodsInfo = [];
        for(var i in response.data.data) {
          if (i <= page.currentPage * 10 && i >= (page.currentPage - 1) * 10) {
            this.goodsInfo.push(response.data.data[i]);
          }
        }
        this.tableLoading = false;
      })
    },
    // 数据合计
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        } else if (index !== 3 && index !== 5) {
          sums[index] = '';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        } else {
          sums[index] = 'N/A';
        }
      });
      return sums;
    },
    close(){
      var str_before = location.href.split('#')[1];
      let { tag, key } = this.findTag(str_before);
      this.$store.commit('DEL_TAG', tag);
      this.$router.go(-1);
    },
    findTag(value) {
      let tag, key
      this.tagList.map((item, index) => {
        if (item.value === value) {
          tag = item
          key = index
        }
      })
      return { tag: tag, key: key }
    }
  }
};
</script>

<style lang="scss" scoped>
.io-goods-detail {
  margin-bottom: 10px;
}
.settle-accounts {
  text-align: right;
}
.basic-information {
  margin-top: 20px;
  font-weight: inherit;
}
.return-btn {
  height: 100px;
  width: 100%;
  text-align: center;
  line-height: 100px;
}
</style>
